<template>
    <!--用户行为日期展示框-->
    <div id="userDate">
        <div style="padding: 4px 16px">
            <el-input
                    placeholder="搜索"
                    prefix-icon="el-icon-search"
                    size="small"
                    v-model="currentSearchValue"
                    clearable
            >
            </el-input>
        </div>

        <template v-if="dataShow">
            <template v-if="currentSearchValue!==''">
                <!--    撑宽度 -->
                <div class="selectCard" style="height: 0px">
                    <template v-for="(item,index) in tabsHeadParams">
                        <template v-if="index!==currentTabsHeadParams">
                            <el-tag size="mini" style="margin-left: 4px;margin-right: 4px;visibility:hidden;" type="info"
                                    @click="scrollToPlace(index)">
                                {{ item }}
                            </el-tag>
                        </template>
                        <template v-else>
                            <el-tag size="mini" style="margin-left: 4px;margin-right: 4px;visibility:hidden;" type="success"
                                    @click="scrollToPlace(index)">
                                {{ item }}
                            </el-tag>
                        </template>
                    </template>
                </div>

                <div class="searchOptionsContent" id="searchOptionsContent">

                    <template v-for="(headItem,headIndex) in currentSearchHeadValue">
                        <el-row v-if="headItem.number>0" class="selectOptionsContentRows" :id="headItem">
                            <el-row class="selectOptionsContentRows" :id="headItem">
                                <el-col :span="1" style="height: 100%">
                                    <div style="width: 3px;height: 18px;margin-top: 6px;background-color: #04cb94"></div>
                                </el-col>
                                <el-col :span="23"
                                        style="height: 100%;justify-content: center;line-height: 30px;">
                                    <div>{{headItem.name}} ({{headItem.number}})</div>
                                </el-col>
                            </el-row>

                            <template v-for="(bodyItem,itemIndex) in currentSearchBodyValue[headIndex]">
                                <el-row class="searchOptionsContentRowsItem" @click.native="selectItem(bodyItem)">
                                    <el-col :span="2" style="height: 100%;display: flex;align-items:center">
                                        <div class="el-icon-full-screen"></div>
                                    </el-col>
                                    <el-col :span="22"
                                            style="height: 100%;justify-content: center;line-height: 30px;display: flex;align-items:center">
                                        <div name="searchOptionsContentRowsItem"
                                             v-html="addInputColor(bodyItem.cname)"></div>
                                        <div style="flex:1 0 auto;"></div>
                                    </el-col>
                                </el-row>
                            </template>

                        </el-row>
                    </template>

                </div>
            </template>
            <template v-else>
                <!--    卡片选择-->
                <div class="selectCard">
                    <template v-for="(item,index) in tabsHeadParams">
                        <template v-if="index!==currentTabsHeadParams">
                            <el-tag size="mini" style="margin-left: 4px;margin-right: 4px;cursor: pointer" type="info"
                                    @click="scrollToPlace(index)">
                                {{ item }}
                            </el-tag>
                        </template>
                        <template v-else>
                            <el-tag size="mini" style="margin-left: 4px;margin-right: 4px;cursor: pointer" type="success"
                                    @click="scrollToPlace(index)">
                                {{ item }}
                            </el-tag>
                        </template>
                    </template>
                </div>


                <div class="selectOptionsContent" id="selectOptionsContent" ref="selectOptionsContent"
                     @scroll="listenScrollToChangeTag(-1)">

                    <template v-for="(headItem,headIndex) in tabsHeadParams">
                        <el-row class="selectOptionsContentRows" :id="headItem">
                            <el-col :span="1" style="height: 100%">
                                <div style="width: 3px;height: 18px;margin-top: 6px;background-color: #04cb94"></div>
                            </el-col>
                            <el-col :span="23"
                                    style="height: 100%;justify-content: center;line-height: 30px;display: flex;align-items:center">
                                <div>{{headItem}}</div>
                                <div style="flex:1 0 auto;background:#e9f0f7;height:1px"></div>
                            </el-col>
                        </el-row>

                        <template v-if="tabsBodyParams[headIndex]!==undefined&&tabsBodyParams[headIndex].list!==undefined">
                            <template v-for="(bodyItem,itemIndex) in tabsBodyParams[headIndex].list">
                                <el-row class="selectOptionsContentRowsItem" @click.native="selectItem(bodyItem,headIndex)">
                                    <el-col :span="2" style="height: 100%;display: flex;align-items:center">
                                        <div class="el-icon-full-screen"></div>
                                    </el-col>
                                    <el-col :span="22"
                                            style="height: 100%;justify-content: center;line-height: 30px;display: flex;align-items:center">
                                        <div>{{bodyItem.cname}}</div>
                                        <div style="flex:1 0 auto;"></div>
                                    </el-col>
                                </el-row>
                            </template>
                        </template>

                    </template>
                </div>
            </template>
        </template>
        <template v-else>
            <el-empty></el-empty>
        </template>
    </div>
</template>

<script>
    /*  数据资料 */
    import DataTypeConfig from './dataType.config.js';

    export default {
        name: "userDate",
        props: {
            /* 是否展示数据 */
            dataShow:{
              type:Boolean
            },
            /* 是页面第几个控件 List的时候使用*/
            origin: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            /* 头部对应的数据*/
            tabsBodyParams: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            /* 传入的头部*/
            tabsHeadParams: {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        data() {
            return {
                /* 当前控件的拖动值*/
                currentScrollTopValue: -1,
                /* 当前选择头部索引值*/
                currentTabsHeadParams: -1,
                /* 当前搜索值*/
                currentSearchValue: "",
                /* 当前搜索值包含的头部*/
                currentSearchHeadValue: [],
                /* 当前搜索值包含的具体数值*/
                currentSearchBodyValue: [],
                /* 上次搜索的html报文*/
                lastContextHtml: {},
                /* 当前选中控件*/
                currentSelectItem: {},
                nowIndex: 0,
                isShow: false,
                scrolltop: 0
            };
        },
        methods: {
            //跳转到指定位置 并且改变卡片状态
            scrollToPlace(index) {
                if (this.tabsBodyParams.length !== 0 && this.tabsHeadParams.length !== 0) {
                    this.currentTabsHeadParams = index;
                    let id = this.tabsHeadParams[index];
                    let t = this;
                    document.getElementById("selectOptionsContent").scrollTop = document.getElementById(id).offsetTop - 100;
                    setTimeout(
                        function () {
                            t.listenScrollToChangeTag(index);
                        }, 0
                    )
                }
            },
            //监听滑动 更新tag标签状态
            listenScrollToChangeTag(index) {
                if (this.tabsBodyParams.length !== 0 && this.tabsHeadParams.length !== 0) {
                    if (index !== -1) {
                        this.currentTabsHeadParams = index;
                    } else {
                        let currentTagIndex = -1;
                        this.currentScrollTopValue = this.$refs.selectOptionsContent.scrollTop;
                        for (let i = 0; i < this.tabsHeadParams.length; i++) {
                            if (this.currentScrollTopValue > document.getElementById(this.tabsHeadParams[i]).offsetTop - 101) {
                                currentTagIndex = i;
                            }
                        }
                        this.currentTabsHeadParams = currentTagIndex
                    }
                }
            },
            //添加文字高亮颜色
            addInputColor(itemText) {
                let context = itemText.split(this.currentSearchValue);
                return context.join('<span style="color: #00bf8a">' + this.currentSearchValue + '</span>');
            },
            //选中控件
            selectItem(item, index) {
                this.$emit("selectItem", this.origin, item, index);
            },
            //切换tab项
            toggleTabs(index) {
                this.nowIndex = index;
            }
        },
        watch: {
            tabsBodyParams: {
                handler: function (val, oldVal) {
                    this.$forceUpdate()
                },
                deep: true
            },
            currentSearchValue: function (newVal, oldVal) {
                if (this.tabsBodyParams.length !== 0 && this.tabsHeadParams.length !== 0) {
                    this.currentSearchHeadValue = [];
                    this.currentSearchBodyValue = [];
                    for (let i = 0; i < this.tabsBodyParams.length; i++) {
                        let haveHeadNumber = 0;
                        this.currentSearchBodyValue.push([]);
                        if (this.tabsBodyParams[i].list !== undefined) {
                            for (let j = 0; j < this.tabsBodyParams[i].list.length; j++) {
                                if (this.tabsBodyParams[i].list[j].cname.indexOf(newVal) > -1) {
                                    haveHeadNumber += 1;
                                    this.currentSearchBodyValue[i].push(this.tabsBodyParams[i].list[j])
                                }
                            }
                        }
                        this.currentSearchHeadValue.push({name: this.tabsHeadParams[i], number: haveHeadNumber})
                    }
                }
            }
        }
    };
</script>

<style lang="scss" scoped>

    #userDate {
        position: absolute;
        min-width: 280px;
        margin-left: 0px !important;
        margin-top: 5px;
        background-color: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        z-index: 101;

        .selectCard {
            width: auto;
            padding: 0px 16px 5px 16px;
            display: flex;
        }

        .selectOptionsContent {
            height: 350px;
            overflow-y: scroll;

            .selectOptionsContentRows {
                height: 30px;
                width: 100%;
                padding: 0px 0px 0px 16px;
            }

            .selectOptionsContentRowsItem {
                height: 30px;
                width: 100%;
                padding: 0px 0px 0px 16px;
                cursor: pointer;

                &:hover {
                    background-color: #EDFAF7 !important;
                }
            }
        }


        .searchOptionsContent {
            height: 350px;
            overflow-y: scroll;

            .searchOptionsContentRows {
                height: 30px;
                width: 100%;
                padding: 0px 0px 0px 16px;
            }

            .searchOptionsContentRowsItem {
                height: 30px;
                width: 100%;
                padding: 0px 0px 0px 16px;
                cursor: pointer;

                &:hover {
                    background-color: #EDFAF7 !important;
                }
            }
        }

        .act {
            background-color: #00b265;
            color: white;
            border-color: #00b265;
        }
    }
</style>

<style lang="scss" scoped>
    ::v-deep.el-input--prefix .el-input__inner {
        border: none;
        border-bottom: 1px solid #cccccc;
        border-radius: 0;
    }

    ::v-deep.el-input__icon {
        line-height: 34px;
    }

    ::v-deep.el-divider__text {
        padding: 0;
    }

    ::v-deep.el-divider--horizontal {
        margin: 20px 0;
    }

    ::v-deep.el-collapse {
        border-top: none;
    }

    ::v-deep.el-collapse-item__header {
        border-bottom: none;
        height: 38px;
    }

    ::v-deep.el-collapse-item__content {
        line-height: 2.3;
    }

    ::v-deep.el-input--prefix .el-input__inner {
        border-bottom: 1px solid #cccccc;
        border-radius: 0;
    }
</style>
